<template>
  <div class="cons">
    <img :src="playMusice.picUrl" alt="" />
    <h2>{{ playMusice.name }}</h2>
    <p>{{ playMusice.artists[0].name }}</p>
    <!-- <p>{{playLists.name}}</p> -->
    <div class="control">
      <input type="range" max="100" 
             ref="timeRange" 
             id="timeRange"/>
      <div class="btn">
        <button>单曲</button>
        <button class="prev">上一曲</button>
        <button class="playing">播放</button>
        <button class="next">下一曲</button>
        <button>歌单</button>
      </div>
    </div>
    <!-- <div class="pList">
      <p v-for="item in songMenu" :key="item.id">{{ item.name }}</p>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "Songs",
  props: {
      playMusice:Object,
      audioDom:Element,
  },
  data() {
    return {
      //   songMenu: [],
      playType:'',
      curIndex:0,
      modeType: ['顺序播放','单曲循环','随机播放','循环播放'],
      modeIndex: 0,
    };
  },
  methods:{
    
  }
};
</script>
<style lang="less" scoped>
.cons {
  padding: 20px 30px;
  color: #fff;
  img {
    width: 100%;
    // height: 100px;
    border-radius: 20px;
  }
  h2 {
    font-weight: 500;
  }
  div.pList {
    position: absolute;
    width: 260px;
    height: 300px;
    right: 0px;
    bottom: 50px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    // display: none;
  }
  .control {
    input {
      width: 100%;
    }
  }
}
</style>